<template>
  <div class="sign">
    <div class="sign-header">
      <router-link to="/sign" tag="span" class="iconfont icon-arrow-left-bold"></router-link>
      <span>帮助</span>
    </div>
    <div class="sign-content">
      <div class="des">
        <h2>请输入验证码</h2>
        <p>验证码已通过短信发送至+86 17806704423</p>
      </div>
      <div class="sign-box">
        <div class="inp">
          <input @input='chengeCode' type="text" v-model="code" class="imp-controll" placeholder="请输入验证码" />
        </div>
        <div class="sele">
            {{ time }}
        </div>
      </div>
        <div class="code-btn">
          <button :disabled="disabled" :class="btnBg?'active':''"  class="load-btn"><div class="loads"></div><div v-if="loading">登录</div></button>
        </div>
      </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            telErea:'',
            time:60,
            code:'',
            disabled:true,
            btnBg:false,
            loading:false
        }
    },
    created(){
        this.getCode()
    },
    methods:{
        timer(){
            if(this.time>0){
                this.time--;
                setTimeout(this.timer,1000);
            }else{
                console.log(1)   
        }
    },
    getCode(){
        this.timer()
        this.codes='1234'
    },
    chengeCode(e){
        this.code = e.target.value;
        if(this.code==this.codes){
            this.disabled = false;
            this.btnBg = true;
            this.loading = true
        }else{
            console.log('验证码错误')
        }

    }
}
};
</script>
<style  scoped>
.sign {
  padding: 30px;
}
.sign-header{
    display: flex;
    justify-content: space-between;
}
.sign-header .icon{
    font-size: 30px;
}
.sign-content{
    padding:  40px 10px;
}
.des{
    margin-bottom: 15px;
}
.des h2{
    font-size: 24px;
    font-weight: bold;
    color: black;
}
.des p{
    line-height: 40px;
    color: #999;
    font-size: 14px;
}
.des,.not-sign p a{
    color: #628db8;
    /* padding: 0 5px; */
}
.sign-box{
    display: flex;
    height: 50px;
    align-items: center;
    background-color: #f9f9f9;
    margin-top: 12px;
    justify-content: space-between;
}
.sele{
    margin-right: 20px;
    color:#ccc;
}

.inp-controll{
    height: 36px;
    background-color: #f9f9f9;
    border: none;
    width: 90%;
    margin-left: 10px;
}
input{
    caret-color: #FE2C55;
    outline:none; 
    border: none;
    background: #f9f9f9;
}
input::-webkit-input-placeholder{
    color: #ccc;
    background: #f9f9f9;
}

.code-btn button{
    margin:20px 0;
    width: 100%;
    padding: 10px 0;
    border: none;
    color: white;
    background-color: #ccc;
}
.code-btn .active{
    color:#ffffff;
    background-color: #FE2C55;
}
.load-btn{
    display:flex;
    justify-content: center;
}
.loads{
    width: 14px;
    height: 14px;
    border: 3px solid #ffffff;
    border-bottom: 3px solid #ccc;
    border-radius: 50%;
    animation: load 1s infinite linear;
    margin-right: 5px;
    margin-top: 3px;
}
@keyframes load {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
</style>>
